<template>
    <a-form :form="form" @submit="onFormSubmit">
        <a-form-item label="登录名称"
                     :label-col="{ span : 5 }"
                     :wrapper-col="{ span : 19 }">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                        'username',
                        { rules: [{ required: true, message: '请输入登录名' }] }
                     ]"
            />
        </a-form-item>

        <a-form-item label="所属部门"
                     :label-col="{ span : 5 }"
                     :wrapper-col="{ span : 19 }">
            <a-select mode="default" placeholder="请选择部门"
                      v-decorator="[
                          'deptId',
                          { rules: [{ required: true, message: '请选择部门' }] }
                      ]"
                      :not-found-content="'角色名称不存在'"
            >
                <a-select-option v-for="dept in deptList" :key="dept.id">{{ dept['deptName'] }}</a-select-option>
            </a-select>
        </a-form-item>

        <a-form-item label="用户角色"
                     :label-col="{ span : 5 }"
                     :wrapper-col="{ span : 19 }">
            <a-select mode="multiple" placeholder="请选择角色"
                      v-decorator="[
                          'roleIds',
                          { rules: [{ required: true, message: '请选择角色' }] }
                      ]"
                      :not-found-content="'角色名称不存在'"
            >
                <a-select-option v-for="role in roleList" :key="role.id">{{ role['roleName'] }}</a-select-option>
            </a-select>
        </a-form-item>

        <a-button type="primary" html-type="submit" block>提交</a-button>
    </a-form>
</template>

<script>
    import { getSysRoleList,getSysDeptList,addSysUser } from '../../../apis/upms';
    export default {
        data(){
            return {
                form : this.$form.createForm(this),
                //  部门列表
                deptList : [],
                //  角色列表
                roleList : [],
            };
        },
        created() {
            let $this = this;
            //  获取部门列表
            getSysDeptList().then(result => $this.deptList = result.data);
            //  查询角色列表
            getSysRoleList({}).then(result => $this.roleList = result.data);
        },
        methods : {
            onFormSubmit : function (e) {
                e.preventDefault();
                let $this = this;
                $this.form.validateFields((err, params) => {
                    if (!err) {
                        addSysUser(params).then(() => {
                            $this.$router.push({
                                name : 'sysUserManage',
                                query : { reload : new Date().getTime().toString() }
                            }).then();
                            $this.$message.success("保存成功").then();
                        });
                    }
                });
            }
        }
    }
</script>
